<script setup>
import { ref, onMounted } from 'vue';
import ChartContainer from '../ChartContainer.vue';
import * as echarts from 'echarts';

// 模拟中国地图数据
const data = [
  {name: '北京', value: 189},
  {name: '天津', value: 98},
  {name: '上海', value: 210},
  {name: '重庆', value: 156},
  {name: '河北', value: 120},
  {name: '河南', value: 145},
  {name: '云南', value: 85},
  {name: '辽宁', value: 110},
  {name: '黑龙江', value: 92},
  {name: '湖南', value: 130},
  {name: '安徽', value: 105},
  {name: '山东', value: 160},
  {name: '新疆', value: 65},
  {name: '江苏', value: 180},
  {name: '浙江', value: 170},
  {name: '江西', value: 95},
  {name: '湖北', value: 115},
  {name: '广西', value: 80},
  {name: '甘肃', value: 75},
  {name: '山西', value: 90},
  {name: '内蒙古', value: 70},
  {name: '陕西', value: 100},
  {name: '吉林', value: 88},
  {name: '福建', value: 125},
  {name: '贵州', value: 78},
  {name: '广东', value: 200},
  {name: '青海', value: 60},
  {name: '西藏', value: 50},
  {name: '四川', value: 155},
  {name: '宁夏', value: 68},
  {name: '海南', value: 72},
  {name: '台湾', value: 95},
  {name: '香港', value: 105},
  {name: '澳门', value: 75}
];

const option = ref({
  title: {
    text: '中国地图数据分布',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  visualMap: {
    min: 0,
    max: 250,
    text: ['高', '低'],
    realtime: false,
    calculable: true,
    inRange: {
      color: ['#3498db', '#2ecc71', '#f1c40f', '#e74c3c']
    }
  },
  series: [
    {
      name: '数据值',
      type: 'map',
      map: 'china',
      roam: true,
      zoom: 1.2,
      emphasis: {
        label: {
          show: true
        }
      },
      data: data
    }
  ]
});

// 注册中国地图
onMounted(async () => {
//   try {
//     const chinaJson = await import('echarts/map/json/china.json');
//     echarts.registerMap('china', chinaJson);
//   } catch (error) {
//     console.error('加载中国地图数据失败', error);
//   }
});
</script>

<template>
  <ChartContainer title="中国地图数据分布" :option="option" />
</template>